<template>
  <!-- 添加产品 -->
  <div class="add-project">
    <a-modal title="添加项目信息" :visible="props.show" @ok="handleOK" @cancel="close">
      <a-form ref="formRef" :model="addForm" :rules="rules" :label-col="{span:6}" :wrapper-col="{span:12}">
        <a-form-item label="项目名" name="projectName">
          <a-input v-model:value="addForm.projectName" />
        </a-form-item>
        <!-- 客户名和客户表id关联 -->
        <a-form-item label="客户名" name="pcusName">
          <a-select v-model:value="addForm.pcusName" placeholder="请选择" @change="cusNameChange">
            <a-select-option :value="item.cusName" v-for="(item,index) in newCustomerInfo" :key="index">{{item.cusName}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="客户id" name="pcusId">
          <a-input v-model:value="addForm.pcusId" />
        </a-form-item>
        <a-form-item label="行业" name="industry">
          <a-select v-model:value="addForm.industry" placeholder="请选择">
            <a-select-option value="0">信息科技</a-select-option>
            <a-select-option value="1">大消费</a-select-option>
            <a-select-option value="2">先进制造</a-select-option>
            <a-select-option value="3">传媒娱乐</a-select-option>
            <a-select-option value="4">传统行业</a-select-option>
            <a-select-option value="5">地产金融</a-select-option>
            <a-select-option value="6">节能环保</a-select-option>
            <a-select-option value="7">生命健康</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="项目简介" name="projectInfo">
          <a-textarea v-model:value="addForm.projectInfo">
          </a-textarea>
        </a-form-item>
        <a-form-item label="价格 " name="price">
          <a-input v-model:value="addForm.price" />
        </a-form-item>
        <a-form-item label="项目结束日期">
          <a-date-picker v-model:value="addForm.endDate"></a-date-picker>
        </a-form-item>
        <a-form-item label="项目状态">
          <a-select v-model:value="addForm.projectState" placeholder="请选择">
            <a-select-option value="0">待开发</a-select-option>
            <a-select-option value="1">进行中</a-select-option>
            <a-select-option value="2">已完成</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, onMounted, reactive, ref } from "vue";
import { project } from "../../../service";
import { message } from "ant-design-vue";
import store from "../../../store/index";
// //不要ref  表单初始数据
// const formData = {
//   projectName: "",
//   pcusName: "",
//   industry: "",
//   projectInfo: "",
//   price: "",
//   endDate: "",
//   projectState: "",
// };
export default defineComponent({
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    initData: {
      type: Object,
    },
  },
  setup(props, context) {
    /**表单校验 */
    const formRef = ref();
    const rules = {
      projectName: [
        {
          required: true,
          message: "项目名必填",
          trigger: "blur",
        },
      ],
      pcusName: [
        {
          required: true,
          message: "客户名必选择",
          trigger: "blur",
        },
      ],
    };
    const customerInfo = ref([]);
    const newCustomerInfo = ref([]);
    /**获取客户信息 */
    onMounted(async () => {
      await store.dispatch("getCustomerInfo");
      customerInfo.value = store.state.customerInfo.list;
      newCustomerInfo.value = customerInfo.value.map((item, index) => {
        return Object.assign({}, { cusName: item.cusName, cusId: item._id });
      });
      console.log("newCustomerInfo.value", newCustomerInfo.value);
    });

    const cusNameChange = (val) => {
      console.log("cusNameChange", val);
      //根据cusName 找对应 addForm.value.pcusId  filter不行？？？
      for (let i = 0; i < newCustomerInfo.value.length; i++) {
        if (newCustomerInfo.value[i].cusName == val) {
          // console.log("===", newCustomerInfo.value[i]);
          addForm.value.pcusId = newCustomerInfo.value[i].cusId;
        }
      }
    };
    /**添加信息 */
    const addForm = ref(JSON.parse(JSON.stringify(props.initData)));
    const handleOK = async () => {
      formRef.value.validate().then(async () => {
        const res = await project.add(addForm.value);
        if (res.data.code == 200) {
          console.log("project.add", res.data.data);
          message.success(res.data.msg);
          //添加成功,关闭modal
          context.emit("setShow", false);
        }
      });
    };
    /**关闭弹窗 */
    const close = () => {
      context.emit("setShow", false);
    };

    return {
      formRef,
      rules,

      addForm,

      handleOK,

      props,
      close,
      newCustomerInfo,
      cusNameChange,
    };
  },
});
</script>

<style lang='less'>
</style>